<!-- 退单列表 -->
<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="">
				<!-- 查询 -->
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="物业">
						<el-select v-model="formInline.wuye_id" placeholder="可选择物业" style="width: 200px;" clearable
							@change="onSubmit">
							<el-option :label="item.wy_name" :value="item.wuye_id" v-for="(item, index) in wuyeList"
								:key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="小区">
						<el-select v-model="formInline.xiaoqu_id" placeholder="可选择小区" style="width: 200px;" clearable
							@change="onSubmit">
							<el-option :label="item.xq_name" :value="item.id" v-for="(item, index) in xiaoqus"
								:key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="门店">
						<el-select v-model="formInline.shop_id" placeholder="可选择门店" style="width: 200px;" clearable
							@change="onSubmit">
							<el-option :label="item.shop_name" :value="item.id" v-for="(item, index) in shopList"
								:key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="订单号">
						<el-input @change="onSubmit" clearable v-model="formInline.id" placeholder="请输入订单号"
							style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item label="订单类型">
						<el-select v-model="formInline.order_type" placeholder="可选择类型" style="width: 200px;" clearable
							@change="onSubmit">
							<el-option label="普通订单" :value="1"></el-option>
							<el-option label="拼团订单" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="订单状态">
						<el-select v-model="formInline.order_state" placeholder="可选择状态" style="width: 200px;" clearable
							@change="handleChange">
							<el-option :label="item.busi_name" :value="item.busi_value"
								v-for="(item, index) in stateList" :key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="联系人姓名">
						<el-input @change="onSubmit" clearable v-model="formInline.express_receive_name"
							placeholder="请输入联系人姓名" style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item label="联系人手机号">
						<el-input @change="onSubmit" clearable v-model="formInline.express_phone"
							placeholder="请输入联系人手机号" style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item label="下单时间">
						<el-date-picker @change="handleChange" style="width: 400px;" v-model="formInline.order_date"
							value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00','23:59:59']">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-form>

				<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
					<el-tab-pane label="全部" name="-1"></el-tab-pane>
					<el-tab-pane label="退款处理中" name="1"></el-tab-pane>
					<el-tab-pane label="退款完成" name="2"></el-tab-pane>
					<!-- <el-tab-pane :label="item.busi_name" :name="item.busi_value" v-for="(item, index) in stateList" :key="index"></el-tab-pane> -->
				</el-tabs>

				<div class="order-list">
					<div class="order-title">
						<div class="col" style="width: 24%;">商品</div>
						<div class="col" style="width: 8%;">单价/数量</div>
						<div class="col" style="width: 8%;">售后</div>
						<div class="col" style="width: 8%;">销售类型</div>
						<div class="col" style="width: 8%;">订单金额</div>
						<div class="col" style="width: 15%;">配送信息</div>
						<div class="col" style="width: 10%;">下单时间</div>
						<div class="col" style="width: 7%;">联系人</div>
						<div class="col" style="width: 6%;">订单状态</div>
					</div>

					<div v-if="list.length == 0"
						style="width: 100;display: flex;justify-content: center;align-items: center;height: 60px;color: #999;">
						暂无数据</div>
					<div v-else class="order-row" v-for="(item, index) in list" :key="index">
						<div class="order-row-title">
							<div class="order-row-title-l">
								<div>订单号:{{item.id}}</div>
								<div>物业: {{item.wy_name}}</div>
								<div>小区: {{item.xq_name}}</div>
								<div>门店: {{item.shop_name}}</div>
							</div>
							<div class="order-row-title-r">
								<div @click="toOrderInfo(item.id)">查看详情</div>
							</div>
						</div>
						<table border="1" cellspacing="0" style="text-align: center;width: 100%">
							<tr v-for="(good, goodIndex) in item.item" :key="goodIndex">
								<td rowspan="1" style="width: 24%;">
									<div class="col" style="display: flex;justify-content: flex-start;">
										<div class="good-img" style="flex-shrink: 0;"><img :src="good.image_center" /></div>
										<div style="text-align: start;">
											<div class="name">{{ good.product_name }}</div>
											<div v-if="good.sku_text"
												style="display: flex;align-items: center;margin-top: 10px;">
												<div class="name" style="font-weight: 600;">{{ good.sku_text }}</div>
											</div>
										</div>
									</div>
								</td>
								<td rowspan="1" style="width: 8%;">
									<div class="col">
										<div class="price">{{ good.sell_price }}</div>
										<div class="number">{{ good.nums }}件</div>
									</div>
								</td>
								<td rowspan="1" style="width: 8%;">
									<div class="col-xg" v-if="good.refund_state_text != '正常'"
										@click="toInfoRefund(good.item_id)">{{ good.refund_state_text }}</div>
								</td>
								<td v-if="goodIndex == 0" :rowspan="item.item.length" style="width: 8%;">
									<div class="col"><el-tag effect="dark" size="small" type="warning">{{ saleType[item.sale_type] }}</el-tag></div>
								</td>
								<td v-if="goodIndex == 0" :rowspan="item.item.length" style="width: 8%;">
									<div class="col">{{ item.total_amount }}</div>
								</td>
								<td v-if="goodIndex == 0" :rowspan="item.item.length" style="width: 15%;">
									<div class="col"><el-tag effect="dark" size="small">{{ delivery[item.delivery_method] }}</el-tag></div>
									<div class="col">{{ $setAddr(item.express_address,item.delivery_method) }}</div>
								</td>
								<td v-if="goodIndex == 0" :rowspan="item.item.length" style="width: 10%;">
									<div class="col">{{ item.createtime }}</div>
								</td>
								<td v-if="goodIndex == 0" :rowspan="item.item.length" style="width: 8%;">
									<div class="col">
										<div class="">{{ item.express_receive_name }}</div>
										<div class="">{{ item.express_phone }}</div>
									</div>
								</td>
								<td v-if="goodIndex == 0" :rowspan="item.item.length" style="width: 8%;">
									<div class="col">{{ item.order_state_text }}</div>
									<!-- <div class="col-xg" v-if="item.state == 2" @click="getOrderExpress(index)">查看物流</div> -->
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" :pager-count="pageCount"
					prev-text="上一页" next-text="下一页" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
		</div>

		<!-- 查看物流详情-->
		<el-dialog title="物流详情" :visible.sync="centerDialogVisible6" width="50%" center>
			<el-table :data="ExpressInfoList" style="width: 100%">
				<el-table-column prop="time" label="时间" width="180"></el-table-column>
				<el-table-column prop="context" label="内容"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	import Api from '@/api/pages/mall/order';
	import ShopApi from '@/api/pages/mall/index';
	export default {
		name: 'chargebackList',
		data() {
			return {
				centerDialogVisible6: false,
				pageSize: 10, // 每页条数
				pageCount: 7, //
				pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
				currentPage: 1, // 当前页码
				total: 0, // 总条数
				list: [],
				formInline: {
					wuye_id: '',
					xiaoqu_id: '',
					shop_id: '',
					id: '',
					order_type:'',
					order_state: '',
					express_receive_name: '',
					express_phone: '',
					order_date: '',
				},
				delivery: {
					1: '快递',
					2: '自配送',
					3: '自提',
					4: '无需配送',
				},
				saleType:{
					1:'到店服务',
					2:'到家服务'
				},
				activeName: '-1',
				stateList: [], //订单状态
				ExpressInfoList: [], //物流信息
				wuyeList:[],
				xiaoqus: [],
				shopList:[],
			};
		},
		created() {
			this.getData();
			this.getStates();
			this.getWuyeList();
			this.loadXiaoQuList();
			this.getShopData();
		},
		methods: {
			// 订单状态
			getStates() {
				Api.getStates({},false).then(res => {
					if (res.state) {
						this.stateList = res.data;
					}
				});
			},
			
			//获取物业
			getWuyeList() {
				ShopApi.getWuyeList({},false).then(res => {
					if (res.state) {
						this.wuyeList = res.data;
					}
				});
			},
			
			//获取小区
			loadXiaoQuList() {
				ShopApi.loadAllXiaoQu({},false).then(res => {
					if (res.state) {
						this.xiaoqus = res.data;
					}
				});
			},
			
			//获取门店
			getShopData() {
				ShopApi.getShopData().then(res => {
					if (res.state) {
						this.shopList = res.data;
					}
				});
			},
			
			handleClick(tab, event) {
				// if (tab.name != -1) {
				// 	this.formInline.order_state = tab.name;
				// } else {
				// 	this.formInline.order_state = '';
				// }
				this.onSubmit();
			},
			// 每页显示的条数
			handleSizeChange(val) {
				this.pageSize = val;
				this.getData(1, val);
				// 注意：在改变每页显示的条数时，要将页码显示到第一页
				this.currentPage = 1;
			},

			// 显示第几页
			handleCurrentChange(val) {
				this.currentPage = val;
				// 切换页码时，要获取每页显示的条数
				this.getData(val, this.pageSize);
			},
			handleChange(e) {
				// console.log(e);
				this.getData();
			},
			onSubmit() {
				// console.log('submit!', this.formInline);
				this.currentPage = 1;
				this.getData();
			},

			getData() {
				let data = {
					pageNumber: this.currentPage,
					pageSize: this.pageSize,
					wuye_id: this.wid
				};
				if (this.formInline.wuye_id) {
					data['wuye_id'] = this.formInline.wuye_id;
				}
				if (this.formInline.xiaoqu_id) {
					data['xiaoqu_id'] = this.formInline.xiaoqu_id;
				}
				if (this.formInline.shop_id) {
					data['shop_id'] = this.formInline.shop_id;
				}
				if (this.formInline.id) {
					data['id'] = this.formInline.id;
				}
				if (this.formInline.order_type) {
					data['order_type'] = this.formInline.order_type;
				}
				if (this.formInline.express_receive_name) {
					data['express_receive_name'] = this.formInline.express_receive_name;
				}
				if (this.formInline.express_phone) {
					data['express_phone'] = this.formInline.express_phone;
				}
				if (this.formInline.order_date) {
					data['order_date'] = this.formInline.order_date[0] + ' - ' + this.formInline.order_date[1];
				}
				if (this.formInline.order_state) {
					data['order_state'] = this.formInline.order_state;
				}
				if (this.activeName != '-1') {
					data['refund'] = this.activeName;
				}

				Api.refundQuery(data).then(res => {
					if (res.state) {
						this.total = res.data.totalRow;
						this.list = res.data.list;
					}
				});
			},
			// 跳转订单详情
			toOrderInfo(id) {
				this.$router.push({
					path: `/orderInfo/index`,
					query: {
						id: id,
						type:2
					}
				});
			},
			// 跳转退款详情
			toInfoRefund(id) {
				this.$router.push({
					path: `/infoRefund/index`,
					query: {
						id: id,
						type:2
					}
				});
			},

			// 查看物流
			getOrderExpress(index) {
				this.centerDialogVisible6 = true;
				orderExpress({
					order_id: this.list[index].id
				}).then(res => {
					if (res.state) {
						this.ExpressInfoList = JSON.parse(res.data.content);
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.type-img {
		width: 80px;
		height: 80px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.pagination-div {
		margin-top: 10px;
	}

	.order-list {
		width: 100%;
		background-color: #ffffff;
		border: 1px #dfe4ed solid;

		.order-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40px;
			background-color: #f5f7fa;
			border-bottom: 1px solid #dfe4ed;
			font-size: 14px;
			color: #666;
			padding: 0 20px;
		}

		.order-row {
			.order-row-title {
				margin-top: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 90px;
				background-color: #f5f7fa;
				font-size: 14px;
				color: #666;
				padding: 0 20px;
				border-top: 1px solid #dfe4ed;

				.order-row-title-r {
					// width: 100px;
					// justify-content: space-between;
					display: flex;
					color: #337ab7;
					cursor: pointer;
				}
			}

			.col-xg {
				margin-top: 5px;
				color: #337ab7;
				cursor: pointer;
			}

			.good-img {
				width: 80px;
				height: 80px;
				margin-right: 10px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.order-row-cols {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.col {
					width: 100%;
					display: flex;
					justify-content: center;
				}

				.order-row-list {}
			}
		}
	}

	td,
	tr,
	table {
		border: 1px #eee solid;
		font-size: 14px;
	}

	td {
		padding: 10px;
	}

	.el-tabs--border-card>>>.el-tabs__content {
		padding: 5px !important;
	}
</style>
